{% extends "smErp/base.html" %}

{% block css_style %}
    {% load staticfiles %}
    <link href="{% static 'smErp/css/register.css' %}" type="text/css" rel="stylesheet">

    <link href="{% static 'smErp/assets/dropzone/basic.min.css' %}" type="text/css" rel="stylesheet">
    <link href="{% static 'smErp/assets/dropzone/dropzone.min.css' %}" type="text/css" rel="stylesheet">

{% endblock %}

{% block content %}
    <div class="inner wrp">
        <div class="container_box cell_layout">
            <div class="processor" id="step">
                <ol>
                    <li id="set1" class="complete size1of3">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step"></i>
                            <h4>填写基本信息</h4>
                        </div>
                    </li>
                    <li id="set2" class="complete size1of3">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step"></i>
                            <h4>邮箱激活</h4>
                        </div>
                    </li>
                    <li id="set3" class="size1of3 current">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">3</i>
                            <h4>完善企业资料</h4>
                        </div>
                    </li>
                    <li id="set4" class="size1of3 last">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">4</i>
                            <h4>企业资料审核</h4>
                        </div>
                    </li>
                </ol>
            </div>

            <div class="step_panel">
                <div class="regist_box base_info" id="step1">
                    {% if company_info.check_status == 1 %}
                    <div class="msg_tips">
                        您的企业资料已提交审核中......
                    </div>
                    {% endif %}
                    <form class="form" id="baseForm" novalidate="novalidate">
                        {% csrf_token %}
                        <div class="main_hd hd_title">
                            <h2>企业业务资料</h2>
                        </div>
                        {% if company_info %}
                            <input name="action"  value="change" hidden>
                        {% else %}
                             <input name="action"  value="create" hidden>
                        {% endif %}
                        <div class="frm_control_group">
                            <label for="" class="frm_label">企业全称</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input id='full_name' class="frm_input" name="full_name" type="text" value="{{ company_info.full_name }}">
                                </span>
                                <p class="frm_tips">只支持中国大陆工商局或市场监督管理局登记的企业。请填写工商营业执照上的企业全称。</p>
{#                                <p id="email-msg" class="frm_tips hider"></p>#}
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">组织机构代码</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input id='organization_code' class="frm_input" name="organization_code" type="text" value="{{ company_info.organization_code }}">
                                </span>
                                <p class="frm_tips">能与组织机构代码证匹配</p>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">工商执照注册号</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input id='registration_no' class="frm_input" name="registration_no" type="text" value="{{ company_info.registration_no }}">
                                </span>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">法定代表人/企业负责人姓名</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input id='representative' class="frm_input" name="representative" type="text" value="{{ company_info.representative }}">
                                </span>
                            </div>
                        </div>
                        <div class="frm_control_group textarea">
                            <label for="" class="frm_label">经营范围<em class="tips">(一般经营范围)</em></label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="scope_normal" id="scope_normal" class="frm_textarea" maxlength="800">{{ company_info.scope_normal }}</textarea>
                                </span>
                                <p class="frm_tips">与企业工商营业执照一致</p>
                            </div>
                        </div>

                        <div class="frm_control_group textarea">
                            <label for="" class="frm_label">经营范围<em class="tips">(前置许可经营范围)</em></label>
                            <div class="frm_controls">
                                <span class="frm_textarea_box">
                                    <textarea name="scope_sepcial" id="scope_sepcial" class="frm_textarea" maxlength="800">{{ company_info.scope_sepcial }}</textarea>
                                </span>
                                <p class="frm_tips">没有则填“无”</p>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">企业规模<em class="tips">(选填)</em></label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input id='staff_num' class="frm_input" name="staff_num" type="number" value="{{ company_info.staff_num }}">
                                </span>
                                <p class="frm_tips">填写企业员工人数</p>
                            </div>
                        </div>

                        <div class="frm_control_group ">
                            <label for="" class="frm_label">企业工商营业执照</label>
                            <div class="frm_controls">
                                <div class="frm_controls">
                                    <div class="upload_wrp">
                                        <div class="upload_box has_demo">
                                            <p class="upload_tips">
                                                请上传企业工商营业执照
                                                <br>
                                                大小不超过500KB。
                                            </p>
                                            <button type="button" class="layui-btn" id="licence" style="background-color: #44b549;">
                                                <i class="layui-icon">&#xe67c;</i>上传图片
                                            </button>
                                            <span class="upload_area webuploader-container"></span>
                                            {% if company_info.licence_img %}
                                                <input name="licence_img" id="licence_img" value="{{ company_info.licence_img }}" type="hidden">
                                            {% else %}
                                                <input name="licence_img" id="licence_img" value="" type="hidden">
                                            {% endif %}
                                            <p class="upload_preview size108" id="fileView-licence-img" style="display: block;">
                                                {% if company_info.licence_img %}
                                                    <img id="" src="{{ company_info.licence_img }}">
                                                {% endif %}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="main_hd hd_title">
                            <h2>管理员信息</h2>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">账号管理员姓名</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input id='manager' class="frm_input" name="manager" type="text" value="{{ company_info.manager }}">
                                </span>
                                <p class="frm_tips">认证审核过程将与管理员联系</p>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">账号管理员手机号码</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input id='manager_phone' class="frm_input" name="manager_phone" type="text" value="{{ company_info.manager_phone }}">
                                </span>
                                <p class="frm_tips">请填写管理员手机号码，认证审核过程将与管理员联系</p>
                                <p id="manager_phone_msg" class="frm_tips hider"></p>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">账号管理员身份证号</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input id='manager_id_card_no' class="frm_input" name="manager_id_card_no" type="text" value="{{ company_info.manager_id_card_no }}">
                                </span>
                                <p id="card_no_msg" class="frm_tips hider"></p>
                            </div>
                        </div>

                        <div class="frm_control_group ">
                            <label for="" class="frm_label">管理员身份证图片</label>
                            <div class="frm_controls">
                                <div class="frm_controls">
                                    <div class="upload_wrp">
                                        <div class="upload_box has_demo">
                                            <p class="upload_tips">
                                                请上传管理员身份证
                                                <br>
                                                大小不超过500KB。
                                            </p>
                                            <button type="button" class="layui-btn" id="manager_id_card" style="background-color: #44b549;">
                                                <i class="layui-icon">&#xe67c;</i>上传图片
                                            </button>
                                            <span class="upload_area webuploader-container"></span>
                                            {% if company_info.manager_id_card_img %}
                                                <input name="manager_id_card_img" id="manager_id_card_img" value="{{ company_info.manager_id_card_img }}" type="hidden">
                                            {% else %}
                                                <input name="manager_id_card_img" id="manager_id_card_img" value="" type="hidden">
                                            {% endif %}
                                            <p class="upload_preview size108" id="fileView-card-img" style="display: block;">
                                                {% if company_info.manager_id_card_img %}
                                                    <img id="" src="{{ company_info.manager_id_card_img }}">
                                                {% endif %}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tool_bar border with_form">
                            <btn href="javascript:;" class="btn btn_primary" id="nextBt">提交</btn>
                        </div>
                    </form>
                </div>

                <div class="app_create_box result" id="step2" style="display:none">
                    <div class="page_msg simple default" style="margin-top: 50px;">
                        <div class="inner group">
                            <span class="msg_icon_wrp">
                                <i class="icon_msg success"></i>
                            </span>
                            <div class="msg_content">
                                <h4>您的应用已成功提交审核，预计在3天内完成审核</h4>
                                <p>
                                    审核通过后，你才可以进行品牌，产品管理
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
{% endblock %}

{% block footscript %}
    <script src="{% static 'smErp/assets/dropzone/dropzone.min.js' %}"></script>
    <script>
        // 存储上传的图片
        var upload_imgs = {} ;
        var id = 1;
        var card_obj = {} ;
        var licence_img_obj = {} ;

        layui.use('upload', function(){
            var upload = layui.upload;
            //营业执照图片上传
            var license_uploadInst = upload.render({
                elem: '#licence' //绑定元素
                ,url: "{% url 'smErp:image_upload' %}" //上传接口
                ,accept: 'images'
                ,data : {"max_size": 500,}
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    //上传完毕回调
                    layer.closeAll('loading'); //关闭loading
                    if(res.result == 0){
                        // 上传成功，回显
                        layer.msg(res.reason);
                        var fileview_licence = $("#fileView-licence-img");
                        fileview_licence.empty();
                        fileview_licence.append('<img id="" src="' + res.img_url + '">');
                        $("#licence_img").val(res.img_url);

                    }else{
                        layer.msg(res.reason);
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });

            //身份证图片上传
{#            manager_id_card_img#}
            var card_uploadInst = upload.render({
                elem: '#manager_id_card' //绑定元素
                ,url: "{% url 'smErp:image_upload' %}" //上传接口
                ,accept: 'images'
                ,data : {"max_size": 500 }
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    //上传完毕回调
                    layer.closeAll('loading'); //关闭loading
                    if(res.result == 0){
                        // 上传成功，回显
                        layer.msg(res.reason);
                        var fileview_card = $("#fileView-card-img");
                        fileview_card.empty();
                        fileview_card.append('<img id="" src="' + res.img_url + '">');
                        $("#manager_id_card_img").val(res.img_url);

                    }else{
                        layer.msg(res.reason);
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });
        });

        var mphone_fg ;
        var mcardno_fg;
        $("#manager_phone").blur(function(){
            var manager_phone = $("#manager_phone").val();
            if(!manager_phone){
                $("#manager_phone_msg").css("color","red");
                $("#manager_phone_msg").html("请输入手机号");
                $("#manager_phone_msg").show();
                mphone_fg = false ;
                return;
            }else{
                if(!check_phone(manager_phone)){
                    $("#manager_phone_msg").css("color","red");
                    $("#manager_phone_msg").html("请输入正确的手机号");
                    $("#manager_phone_msg").show();
                    mphone_fg = false ;
                    return;
                }
            }
            mphone_fg = true;
        }).focus(function(){
            $("#manager_phone_msg").hide();
        });

        $("#manager_id_card_no").blur(function(){
            var manager_id_card_no = $("#manager_id_card_no").val();
            if(!manager_id_card_no){
                $("#card_no_msg").css("color","red");
                $("#card_no_msg").html("请输入管理员身份证号");
                $("#card_no_msg").show();
                mcardno_fg = false ;
                return;
            }else{
                if(!isCardNo(manager_id_card_no)){
                    $("#card_no_msg").css("color","red");
                    $("#card_no_msg").html("请输入正确的身份证号");
                    $("#card_no_msg").show();
                    mcardno_fg = false ;
                    return;
                }
            }
            mcardno_fg = true;
        }).focus(function(){
            $("#card_no_msg").hide();
        });

        $("#nextBt").on("click", function(){
            var company_info = $("#baseForm").serialize();
            alert(company_info);
            console.log(company_info);
            $.post("{% url 'smErp:complete_company' %}", company_info,
                    function(data, status, xhr) {
                        if(status == 'success'){
                            // 提交品牌信息
{#                            alert(company_info);#}
                            if(data.result == 0) {
                                // 切换状态
                                $("#set4").addClass("current");
                                $("#set3").removeClass("current");
                                $("#set3").addClass("complete");
                                $("#set3").children("div[class='step_inner']").children("i[class='icon_step']").html("");
                                $("#set3").children(".step_line").css("background-color", "#44b549");
                                // 切换页面
                                $("#step1").hide();
                                $("#step2").show();
                            }else{
                                layer.msg(data.reason);
                            }
                        }else{
                            layer.msg(status);
                        }
                        // 改变进度 栏状态

                    },
            "json");
        });

        function upload_card_img(){
            console.log("进行点击操作");
            card_obj.removeAllFiles();
            $("#card_img").click();
        }
        function upload_licence_img(){
            console.log("进行点击操作");
            licence_img_obj.removeAllFiles();
            $("#licence_img").click();
        }
    </script>
{% endblock %}




